<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入框</title>
	</head>
	<style>
		.primary:focus {
		      outline: 1px solid green; /* 更改输入框获得焦点时的轮廓颜色为红色 */
		}
		input[type=text].primary {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  display: inline-block;
		  border: 1px solid #ccc;
		  border-radius: 4px;
		  box-sizing: border-box;
		  
		}
		
		input[type=text].bottom {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  border: none;
		  border-bottom: 2px solid #ccc;
		  outline: none
		}
		
		input[type=text].icon{
		  width: 100%;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  font-size: 16px;
		  background-color: white;
		  background-image: url('../img/searchicon.png');
		  background-position: 10px 10px; 
		  background-repeat: no-repeat;
		  padding: 12px 20px 12px 40px;
		  outline: none;
		  color: #ccc;
		}
		
	</style>
	<body>
		  <label for="fname">First Name</label>
		  <input class="primary" type="text" id="fname" name="firstname" placeholder="Your name..">
		  <br>
		  <label for="fname2">First Name</label>
		  <input class="bottom" type="text" id="fname2" name="firstname" placeholder="Your name..">
		  <br/>
		  <label for="fname3">search</label>
		  <input class="icon" type="text" id="fname3" name="firstname" placeholder="Your name..">
		  
		  
	</body>
</html>